<div id="form<?php echo $uniqid;?>" style="padding-top: 20px">
  <el-form :model="goodsList" method="post" size="small" label-width="140px" @submit.native.prevent label-position="right">
    <el-form-item label="商品ID：">
      {{goodsList.id}}
    </el-form-item>
    <el-form-item label="商品名称：">
      {{goodsList.title}}
    </el-form-item>
    <el-form-item label="商品图片：">
      <template slot-scope="scope">
        <div class="display-flex">
          <img height="100px" :src="goodsList.image+'?imageView2/1/w/100/h/100'"></a>
        </div>
      </template>
    </el-form-item>
    <el-form-item label="商品价格：">
      {{goodsList.price}}
    </el-form-item>
    <el-form-item label="返现规则：">
      <el-radio-group v-model="use_default" @change="changeUse">
        <el-radio :label="0">使用独立规则</el-radio>
        <el-radio :label="1">使用默认规则</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品返现比例：" v-if="use_default === 0 && goodsList.back_money == 0">
      <el-input type="number" autocomplete="off" size="small" v-model.number="goodsList.back_ratio" step="50" style="width: 200px; text-align: right;" @input="inputRatio">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
    <el-form-item label="商品返现金额：" v-if="use_default === 0 && goodsList.back_ratio == 0">
      <el-input type="number" autocomplete="off" size="small" v-model.number="goodsList.back_money" step="50" style="width: 200px; text-align: right;" @input="inputRatio">
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
  </el-form>
</div>
<script>
  var cashbackinfoEditVm = new Vue({
    el: '#form<?php echo $uniqid;?>',
    data: {
      goodsList: JSON.parse('<?php echo addslashes($goodslist);?>'),
      use_default: 1,
      detail: {
        id:0,
        back_money:0.00,
        back_ratio:0.00
      },
    },
    mounted(){
      this.init();
    },
    methods: {
      init(){
        if (this.goodsList.back_money > 0 || this.goodsList.back_ratio > 0){
          this.use_default = 0;
        }
      },
      changeUse(){
        if(this.use_default === 1){
          this.goodsList.back_money = 0.00;
          this.goodsList.back_ratio = 0.00;
        }
      },
      inputRatio(){
        if(this.goodsList.back_ratio > 100){
          this.goodsList.back_ratio = 100.00;
        }
        if(this.goodsList.back_ratio < 0){
          this.goodsList.back_ratio = 0.00;
        }
        if(this.goodsList.back_money < 0){
          this.goodsList.back_money = 0.00;
        }
      },
      submit: function(){
        this.detail.id = this.goodsList.id;
        this.detail.back_money = (!this.use_default && this.goodsList.back_ratio>0)?0.00:this.goodsList.back_money;
        this.detail.back_ratio = (!this.use_default && this.goodsList.back_money>0)?0.00:this.goodsList.back_ratio;
        $.post('/admin/cashbackgoods/setbackinfo', this.detail, function(data){
          if(data.ret===0){
            $.messager.show({
              title:'提示',
              msg:data.msg,
              timeout:3000,
              showType:'slide'
            });
            $("#cashbackgoodsDlg").dialog('close');
            cashbackgoodsReload();
          }else{
            $.messager.alert('提示',data.msg,'warning');
          }
        });
      }
    }
  });
  $('#setbackinfosubmit').click(function(data){
    cashbackinfoEditVm.submit();
  })
</script>
<style>
  .zindex_popper{
    z-index: 20000 !important;
  }
</style>